<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>objects</title>
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="table-container">
        <div class="layui-btn-container objects-header">
            <div>
                <button type="button" class="layui-btn" lay-on="upload" id="ID-upload-demo-choose">上传文件</button>
                <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
            </div>
            <div>
                <button type="button" class="layui-btn" onclick="window.location.href='/containers'">返回上一级</button>
            </div>
        </div>
        <table class="layui-hide table-layout" id="ID-table-demo-data"></table>
    </div>
</body>
</html>
<script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>

<!-- 工具栏模板 -->
<script type="text/html" id="operation-bar">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="query">查询</a>
    <a class="layui-btn layui-btn-xs" lay-event="copy">复制</a>
    <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </div>
</script>

<script>
    
  // 假设 resp1 是从后端传递过来的数据
  var resp1 = {{ resp1 | safe }};
  const containerName = "{{ data2 }}"
  console.log(containerName);
  
    
layui.use(['table', 'form', 'layer'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  var upload = layui.upload;
  var element = layui.element;
  var $ = layui.$;

  // 监听工具条
  table.on('tool(ID-table-demo-data)', function(obj){
    var data = obj.data; // 获取当前行数据
    var layEvent = obj.event; // 获取 lay-event 对应的值（也可以是表头的 event 参数对应的值）

    if(layEvent === 'del'){ // 删除
      layer.confirm('真的删除行么', function(index){
        window.location.href = `/main4/${containerName}/${data.name}`;
        layer.close(index);
      });
    } else if(layEvent === 'query'){
      window.location.href = `/main3/${containerName}/${data.name}/${data.content_type}}`;
    } else if(layEvent === 'copy'){
      promptForTargetContainer(containerName, data.name)
    } else if(layEvent === 'download'){
      window.location.href = `/download/${containerName}/${data.name}`;
    }
  });

  // 上传框
  upload.render({
    elem: '#ID-upload-demo-choose',
    url: '/upload/' + containerName, // 此处配置你自己的上传接口即可
    method: 'post', // 明确指定使用POST方法
    auto: false,
    // multiple: true,
    bindAction: '#ID-upload-demo-action',
    accept: 'file',
    done: function(res) {
        if (res.status === 'success') {
            layer.msg('上传成功');
            location.reload();
        } else {
            layer.msg('上传失败: ' + res.message);
        }
    },

    error: function(err) {
        layer.msg('上传失败');
        console.error(err);
    }
  });
 
  // 将 resp1 数据转换为 Layui 表格所需的格式
  var data = resp1.map(function(item) {
      return {
          name: item.name,
          content_type: item.content_type,
          bytes: item.bytes,
          last_modified: item.last_modified
      };
  });
  // 已知数据渲染
  var inst = table.render({
    elem: '#ID-table-demo-data',
    cols: [[ //标题栏
      {field: 'name', title: '名称', width: 120},
      {field: 'content_type', title: '类型', width: 120},
      {field: 'bytes', title: '大小', width: 80, sort: true},
      {field: 'last_modified', title: '上一次修改日期', width: 300},
      {fixed: 'right', title:'操作', align:'center', toolbar: '#operation-bar'}
    ]],
    data: data,

    //skin: 'line', // 表格风格
    //even: true,
    page: true, // 是否显示分页
    limits: [5, 10, 15],
    limit: 5 // 每页默认显示的数量
  });

  function promptForTargetContainer(sourceContainer, sourceObject) {
      var targetContainer = prompt("请输入目标容器名称:");
      if (targetContainer) {
          window.location.href = "/copy/" + encodeURIComponent(sourceContainer) + "/" + encodeURIComponent(sourceObject) + "/" + encodeURIComponent(targetContainer);
      }
  }
})
</script>
<style>
    .table-container {
        width: auto;
        height: 100%;
        margin-left: 4rem;
        margin-top: 2rem;
        margin-right: 2rem;
    }
    .objects-header{
        display: flex;
        justify-content: space-between;
    }
</style>